<template>
	<div class="itester-wrap">
		<APIForUE ref="apiForUERef"   @handleClick="handleApiNavClick"></APIForUE>
		<div class="player-wrap" id="player"></div>
		<EditForUE ref="editForUERef" ></EditForUE>
		<LoadingForUE ref="loadingForUERef"></LoadingForUE>
		<div class="error" v-if="errorMask">
			<div>
				<span @click="back">{{errorMessage}}</span>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { useRouter,useRoute } from 'vue-router'
	import APIForUE from "./components/APIForUE.vue";
	import EditForUE from "./components/EditForUE.vue";
	import LoadingForUE from "@/components/LoadingForUE/index.vue";
	import cloudRenderer from "uesuperapi";
	const loadingForUERef=ref();
	const router = useRouter()
	
	const route = useRoute()
	const apiForUERef = ref()
	const editForUERef = ref()
	const errorMask=ref(false);
	const errorMessage=ref('');
	
	const handleApiNavClick=(data:any)=>{
		if(data){
			editForUERef.value.collapse(true);
			editForUERef.value.setCode(data);
		}else{
			editForUERef.value.collapse(false);
			editForUERef.value.setCode({
				name:'调试区',
				content:"",
			});
		}
	}
	
	let CloudRender: any;
	CloudRender = new cloudRenderer("player", 0);
	const init=(appid)=> {
		loadingForUERef.value.show('维护合众');
		Promise.race([
			fetch(`${import.meta.env.VITE_APP_BASE_API}/api/v1/render/order`, {
				method: "POST",
				headers: { "Content-type": "application/json" },
				body: JSON.stringify({appid:appid, resX:window.innerWidth, resY:window.innerHeight})
			}),
		    new Promise(function(resolve:any,reject){
		        setTimeout(()=> reject(new Error('request timeout')),1000*10)
		    })])
		    .then((res:any)=>{
				if (!res.ok) { errorMessage.value=res.statusText; errorMask.value=true;  throw Error(res.statusText) }
				return res.json()
		    }).then(res => {
				if (res.code!=200) { 
					errorMessage.value=res.message; 
					errorMask.value=true;
					throw Error(res.message) 
				}
				return res.result
			}).then((data:any) =>{
				
				loadingForUERef.value.change(150)
				CloudRender.SuperAPI("loadCompleteResponse", (e: any) => {
					loadingForUERef.value.complete();
					apiForUERef.value.setName(route.query.name);
					apiForUERef.value.collapse(true);
					apiForUERef.value.load(0);
				});
				CloudRender.SuperAPI("StartRenderCloud", data.url);
			}).catch((e)=>{
				loadingForUERef.value.complete();
			}).finally(()=>{
		});
	}
	
	const back=()=>{
		router.push({ path: '/scene/scene'})
	}
	
	onDeactivated(()=>{
		console.log('onDeactivated');
	})
	
	onBeforeUnmount(()=>{
		console.log('onBeforeUnmount');
		loadingForUERef.value.complete();
		try{
			if(CloudRender!=null) CloudRender.SuperAPI("StopRenderCloud",{});
		}catch(e){
		}
	})
	onUnmounted(()=>{
		console.log('onUnmounted');
	})
	
	onActivated(()=>{
		console.log('onActivated');
	})
	onErrorCaptured(()=>{
		console.log('onErrorCaptured');
	})
	
	onMounted(() => {
		if(!route.query.id){
			back();
			return
		}
		init(route.query.id)
	});
	
	
</script>

<style scoped>
	
	.itester-wrap{
		position: relative;
		width: 100%;
		height:100%;
		background-color: rgba(0,0,0,1);
		.player-wrap{
		    width: 100%;
		    height: 100%;
		    position: relative;
			background-color: rgba(0,0,0,1);
		}
		#player{
			width: 100%;
			height: 100%;
			position: relative;
			background-color: rgba(0,0,0,1);
		}
		
		.error{
			display: flex;
			align-items: center;
			position: fixed;
			right: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
			z-index: 10000;
			font-family: PingFang SC,sans-serif;
			box-shadow: 0 0 10px 0 rgba(14,14,14,.3);
			background-image: url(/src/assets/images/Loading_Mask.png);
			background-size: cover;
			background-repeat: no-repeat;
			transition: opacity 0.3s;
			flex-direction: column;
			background-position-y: 1px;
			background-repeat: no-repeat;
			-moz-user-select:none; /* Firefox私有属性 */
			-webkit-user-select:none; /* WebKit内核私有属性 */
			-ms-user-select:none; /* IE私有属性(IE10及以后) */
			-khtml-user-select:none; /* Khtml内核私有属性 */
			-o-user-select:none; /* Opera私有属性 */
			user-select:none; /* CSS3属性 */
			display: flex;
			justify-content: center;
			flex-wrap: nowrap;
			flex-direction: column;
			>div{
				>span{
					color:  #ff0000;
					cursor: pointer;
				}
			}
		}
	}

</style>
